<template>
  <div class="user-profile-page">
    <!-- 用户信息头部 -->
    <UserProfileInfo 
      :user="profileStore.profile"
      :is-current-user="isCurrentUser"
      :is-following="isFollowing"
      @edit-profile="handleEditProfile"
      @toggle-follow="toggleFollow"
    />

    <!-- 主要内容区域 -->
    <div class="profile-content">
      <UserProfileMain
        :current-tab="currentTab"
        :tabs="tabs"
        :user-articles="profileStore.userArticles"
        :user-comments="profileStore.userComments"
        :liked-articles="profileStore.likedArticles"
        @tab-change="currentTab = $event"
      />

      <UserProfileSidebar
        :user="profileStore.profile"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '../stores/userStore'
import { useProfileStore } from '../stores/profileStore'
import UserProfileInfo from '../components/UserProfileInfo.vue'
import UserProfileMain from '../components/UserProfileMain.vue'
import UserProfileSidebar from '../components/UserProfileSidebar.vue'

const route = useRoute()
const userStore = useUserStore()
const profileStore = useProfileStore()

const userId = computed(() => route.params.id)
const currentTab = ref('articles')
const isFollowing = ref(false)

const tabs = [
  { id: 'articles', name: '文章' },
  { id: 'comments', name: '评论' },
  { id: 'likes', name: '点赞' }
]

const isCurrentUser = computed(() => {
  return userStore.currentUser?.id === Number(route.params.id)
})

// 监听路由参数变化
watch(
  () => route.params.id,
  (newId, oldId) => {
    if (newId !== oldId) {
      // 重新加载数据
      loadUserData()
    }
  }
)

// 加载用户数据的函数
const loadUserData = async () => {
  try {
    await Promise.all([
      profileStore.fetchUserProfile(route.params.id),
      profileStore.fetchUserArticles(route.params.id),
      profileStore.fetchUserComments(route.params.id),
      profileStore.fetchLikedArticles(route.params.id),
      // isCurrentUser.value && profileStore.fetchUserExtendedInfo(route.params.id)
    ])

    // 如果已登录且不是当前用户，检查关注状态
    if (userStore.isLogin && userId.value !== userStore.currentUser?.id) {
      const isFollowed = await userStore.checkIsFollowing(route.params.id)
      isFollowing.value = isFollowed
    }
  } catch (error) {
    console.error('加载用户数据失败:', error)
  }
}

onMounted(() => {
  loadUserData()
})

const handleEditProfile = () => {
  // 处理编辑个人资料
}

const toggleFollow = async () => {
  try {
    if (isFollowing.value) {
      await userStore.unfollowUser(userId.value)
      if (profileStore.profile?.stats) {
        profileStore.profile.stats.followers--
      }
    } else {
      await userStore.followUser(userId.value)
      if (profileStore.profile?.stats) {
        profileStore.profile.stats.followers++
      }
    }
    isFollowing.value = !isFollowing.value
  } catch (error) {
    console.error('操作失败:', error)
    alert(error.response?.data?.error || '操作失败，请稍后重试')
  }
}
</script>

<style scoped>
.user-profile-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.profile-content {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
}

@media (max-width: 768px) {
  .profile-content {
    grid-template-columns: 1fr;
  }
}
</style>